<template>
  <button v-if="count < 5" @click="count++" v-zjd.color="'blue'">{{ count }}点我</button>
  <br />
  <button v-if="count < 5" @click="count++" v-zjd.color="'red'">{{ count }}点我</button>
</template>

<script>
import { ref } from 'vue'
export default {
  directives: {
    zjd: {
      mounted(el, bindings, vnode, preVnode) {
        console.log('组件mounted bindings', bindings)
        console.log('自定义指令的修饰符取值', bindings.modifiers)
        console.log('自定义指令的传参', bindings.value)
        const { color } = bindings.modifiers
        const value = bindings.value
        if (color && value) {
          el.style.color = value
        }
      },
    },
  },
  setup() {
    const count = ref(0)
    return {
      count,
    }
  },
}
</script>

<style scoped></style>
